<!--
 * @Author: Zcl84765
 * @Date: 2022-11-07 10:30:20
 * @LastEditors: Zcl84765
 * @LastEditTime: 2022-11-15 15:03:48
-->
<template>
  <div>
    <div>
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="130px"
        class="demo-ruleForm"
      >
        <el-form-item label="模板名称：" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="计费方式：" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio :label="0">按件数</el-radio>
            <el-radio :label="1">按重量</el-radio>
            <el-radio :label="2">按体积</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="配送区域及运费：">
          <el-table
            :data="ruleForm.region"
            border
            fit
            highlight-current-row
            style="width: 100%"
            size="mini"
          >
            <el-table-column align="center" min-width="260" label="可配送区域">
              <template scope="scope">
                <span v-if="scope.$index == 0">默认全国</span>
                <el-cascader
                  v-else
                  v-model="scope.row.city_ids"
                  :options="cityList"
                  :props="props"
                  clearable
                  collapse-tags
                ></el-cascader>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="130" :label="ruleForm.type == 0 ? labeObj.title : ruleForm.type == 1 ? '首件重量' : '首件体积'">
              <template scope="scope">
                <el-input-number
                  v-model="scope.row.first"
                  :min="1"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="130" label="运费">
              <template scope="scope">
                <el-input-number
                  v-model="scope.row.firstPrice"
                  :min="1"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="130" :label="ruleForm.type == 0 ? labeObj.title : ruleForm.type == 1 ? '续件重量' : '续件体积'">
              <template scope="scope">
                <el-input-number
                  v-model="scope.row.renewal"
                  :min="1"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="130" label="续费">
              <template scope="scope">
                <el-input-number
                  v-model="scope.row.renewalPrice"
                  :min="1"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.$index > 0"
                  type="text"
                  size="small"
                  @click="deleteRegion(ruleForm.region, scope.$index)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="addRegion(ruleForm.region)"
          >
            添加配送区域
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labeObj: {
        title: "首件",
        title1: "续件"
      },
      ruleForm: {
        name: "",
        type: 0,
        region: [
          {
            first: 0, //首件
            firstPrice: 0, //运费
            renewal: 0, //续件
            renewalPrice: 0, //续费
            city_ids: [] // 城市地址
          }
          // {
          //   first: 0, //首件
          //   firstPrice: 0, //运费
          //   renewal: 0, //续件
          //   renewalPrice: 0, //续费
          //   city_ids: [] // 城市地址
          // }
        ]
      },
      cityList: [
        {
          value: 1,
          label: "东南",
          children: [
            {
              value: 2,
              label: "上海",
              children: [
                { value: 3, label: "普陀" },
                { value: 4, label: "黄埔" },
                { value: 5, label: "徐汇" }
              ]
            },
            {
              value: 7,
              label: "江苏",
              children: [
                { value: 8, label: "南京" },
                { value: 9, label: "苏州" },
                { value: 10, label: "无锡" }
              ]
            },
            {
              value: 12,
              label: "浙江",
              children: [
                { value: 13, label: "杭州" },
                { value: 14, label: "宁波" },
                { value: 15, label: "嘉兴" }
              ]
            }
          ]
        },
        {
          value: 17,
          label: "西北",
          children: [
            {
              value: 18,
              label: "陕西",
              children: [
                { value: 19, label: "西安" },
                { value: 20, label: "延安" }
              ]
            },
            {
              value: 21,
              label: "新疆维吾尔族自治区",
              children: [
                { value: 22, label: "乌鲁木齐" },
                { value: 23, label: "克拉玛依" }
              ]
            }
          ]
        }
      ],
      props: { multiple: true }
    };
  },
  methods: {
    addRegion(region) {
      region.push(
        Object.assign(
          {},
          {
            first: 0,
            firstPrice: 0,
            renewal: 0,
            renewalPrice: 0,
            city_ids: []
          }
        )
      );
    },
    deleteRegion(list, idx) {
      list.splice(idx, 1);
    }
  }
};
</script>

<style></style>
